<template>
  <div class="management">
    <!-- 左侧 -->
    <transition name="left">
      <management-left class='panel-left management-left'
                       v-if="panelShow"></management-left>
    </transition>
    <!-- 右侧 -->
    <div class='panel-right'>
      <transition name="right">
        <management-right class='management-right'
                          v-if="panelShow"></management-right>
      </transition>
      <widget class="widget"
              :class="{'moveToRight':moveToRight,'backToleft':backToleft}"></widget>
    </div>

  </div>
</template>

<script>
import Widget from "../components/widget/widget.vue";
import Bus from "../components/utils/bus.js";
import ManagementLeft from '../components/management/manage-left'
import ManagementRight from '../components/management/manage-right'
export default {
  components: {
    ManagementLeft,
    ManagementRight,
    Widget
  },
  data () {
    return {
      panelShow: true,
      moveToRight: false,
      backToleft: true,
      moveToLeft: false,
      backToRight: true,
    };
  },
  mounted () {
    Bus.$on("toggle", () => {
      this.panelShow = !this.panelShow;
      this.moveToRight = !this.moveToRight;
      this.backToleft = !this.backToleft;
      this.moveToLeft = !this.moveToLeft;
      this.backToRight = !this.backToRight;
    });
  },
  methods: {}
};
</script>

<style lang="scss" >
$precent: 100vw / 1920;
@keyframes left {
  100% {
    transform: translateX(-500 * $precent);
  }
}
@keyframes right {
  100% {
    transform: translateX(500 * $precent);
  }
}
@keyframes backLeft {
  0% {
    transform: translateX(-500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes backRight {
  0% {
    transform: translateX(500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
// 向右下角移动
.moveToRight {
  top: 710 * $precent;
  right: -9 * $precent;
  transition: 1s;
}
.backToleft {
  top: 625 * $precent;
  right: 465 * $precent;
  transition: 1s;
}
// 向左下角移动
.moveToLeft {
  bottom: 20 * $precent;
  left: 10 * $precent;
  transition: 1s;
}
.backToRight {
  bottom: 105 * $precent;
  left: 490 * $precent;
  transition: 1s;
}

.left-enter-active {
  transition: opacity 0.5s;
  animation: backLeft 1s;
}
.left-enter {
  opacity: 0;
}
.left-leave-active {
  transition: opacity 0.5s;
  animation: left 1s;
}

.right-enter-active {
  transition: opacity 0.5s;
  animation: backRight 1s;
}
.right-enter {
  opacity: 0;
}
.right-leave-active {
  transition: opacity 0.5s;
  animation: right 1s;
}
.management {
  z-index: 10;
  text-align: center;
  position: relative;
  transition: 2s;
  .panel-right {
    position: fixed;
    top: 76 * $precent;
    right: 20 * $precent;
    z-index: 10;
    .widget {
      position: absolute;
      width: 55 * $precent;
    }
    h3 {
      color: #2b9aea;
      padding-top: 20 * $precent;
      padding-left: 30 * $precent;
      text-align: left;
      margin-bottom: 20 * $precent;
    }
    .management-right {
      float: right;
      top: 80 * $precent;
      margin-right: -20 * $precent;
    }
  }
  // .management-left {
  //   position: fixed;
  //   top: 80 * $precent;
  //   left: 20 * $precent;
  //   width: 483 * $precent;
  // }
}
</style>
